import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Link,
  NavLink,
  Route
} from 'react-router-dom'
import Home from './Home'
import Login from './Login'
import Position from './Position'
import './auth.css'

const CustomLink=(props)=>{
    return (
      <li>
        <NavLink to={props.to} activeClassName="selected">
        {props.children}
        </NavLink>
      </li>
    )
}

export default class Index extends Component {

  constructor(){
    super();
    this.state={
      islogin:false
    }
  }

  

  render() {

    const Routers = [
      {
        path: '/home', component: Home, auth: false
      },
      {
        path: '/position', component: Position, auth: true
      }
    ]


    return (
      <ul>
        <Router>
          <CustomLink to="/home">首页</CustomLink>
          &nbsp;
          <CustomLink to="/position">职位信息</CustomLink>
          {/* <Link to="/login">用户</Link> */}

          {
            Routers.map((item, index) => {
              return <Route key={index} path={item.path}
                render={() => {
                  if (item.auth) {
                    return  this.state.islogin ? <item.component></item.component>:<Login login={()=>{
                      this.setState({
                        islogin:true
                      })
                    }}></Login>
                  } else {
                    return <item.component></item.component>
                  }
                }}
              ></Route>
            })
          }
        </Router>

      </ul>
    )
  }
}
